<template>
    <div class="tab-item" :class="{ 'tab-item-active': active }">
        <slot />
    </div>
</template>


<script setup>

// 引用声明
const props = defineProps({
    active: {
        type: Boolean,
        default: () => false
    }
})
</script>

<style>
.tab-item {
    @apply px-3 py-4 text-gray-700 text-sm cursor-pointer flex-shrink-0;
}

.tab-item:hover {
    @apply text-blue-400;
}

.tab-item-active {
    border-bottom: 2px solid;
    @apply text-blue-400 border-blue-400;
}
</style>